<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    .tab {
      width: 978px;
      margin: 100px auto;
    }

    .tab_list {
      height: 39px;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    .tab_list li {
      float: left;
      height: 39px;
      line-height: 39px;
      padding: 0 20px;
      text-align: center;
      cursor: pointer;
    }

    .tab_list .current {
      background-color: #c81623;
      color: #fff;
    }

    .item_info {
      padding: 20px 0 0 20px;
    }

    .item {
      display: none;
    }
  </style>
</head>

<body>
  <div class="tab">
    <div class="tab_list">
      <ul>
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评价（50000）</li>
        <li>手机社区</li>
      </ul>
    </div>
    <div class="tab_con">
      <div class="item" style="display: block;">商品介绍模块内容</div>
      <div class="item">规格与包装模块内容</div>
      <div class="item">售后保障模块内容</div>
      <div class="item">商品评价（50000）模块内容</div>
      <div class="item">手机社区模块内容</div>
    </div>
  </div>
  <!-- 第一步 引入jq源文件 -->

  <!-- 第二步 实现效果  -->
  <script>
    // 1.添加事件

    // 事件触发后
    // 2.1给li添加红色背景样式

    // 2.2切换item显示隐藏
  </script>
</body>

</html>